<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css处理图片</title>
		<style type="text/css">
			body{
				text-align: center;
			}
			#img1{
				width: 420px;
				height: 560px;
			}
		</style>
	</head>

	<body>
		<img id="img1" src="1.jpg"/>
		<input type="button" id="moHu" value="高斯模糊" />
		<input type="button" id="fuGu" value="复古" />
		<input type="button" name="baoHe" id="baohe" value="饱和色" />
		
	</body>
	<script type="text/javascript">
		var img1 = document.getElementById("img1");
		console.log(img1);
		var moHuBtn = document.getElementById("moHu");
		var fuGuBtn = document.getElementById("fuGu");
		var baoHeBtn = document.getElementById("baohe");
		//处理高斯模糊效果
		moHuBtn.onclick = function () {
//			console.log("0");
			img1.style.webkitFilter = "blur(15px)";
			img1.style.filter = "blur(15px)";
		}
		//复古
		fuGuBtn.onclick = function () {
//			console.log("1");
			img1.style.webkitFilter = "sepia(90%)";
			img1.style.filter = "sepia(90%)";
		}
		//饱和色
		baoHeBtn.onclick = function () {
//			console.log("2");
			img1.style.webkitFilter = "saturate(200%)";
			img1.style.filter = "saturate(200%)";
		}
	</script>

</html>